<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入elementui样式类-->
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/js/index.css">
    <link rel="stylesheet" href="/js/scrollbar.css">
    <script src="/js/jquery-3.2.1.js"></script>
    <style>
        .from-left {
            float: left;
            min-width: 30%;
        }

        .from-right {
            float: left;
            padding-left: 30px;
            min-width: 60%;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 132px;
            height: 132px;
            line-height: 132px;
            text-align: center;
        }
        .avatar {
            width: 132px;
            height: 132px;
            display: block;
        }
    </style>

</head>
<body>
<div id="app">
    <div class="from-left">
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>个人信息</span>
            </div>
            <div style="margin: 0 auto ; text-align: center">
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8088/api/user/updateHeadPortrait"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :data={account:ruleForm.account}>
                    <el-avatar :src="imageBase64" :size="90"></el-avatar>
                </el-upload>
            </div>
            <el-descriptions class="margin-top" :column="1" :size="size" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        用户名
                    </template>
                    <shiro:principal property="account" />
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-custom"></i>
                        名称
                    </template>
                    <shiro:principal property="userName" />
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号
                    </template>
                    <shiro:principal property="phone"/>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-female"></i>
                        性别
                    </template>
                    {{<shiro:principal property="gender"/>==1 ? '男' : '女'}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        出生日期
                    </template>
                    <shiro:principal property="birthday"/>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-chat-dot-round"></i>
                        邮箱
                    </template>
                    <shiro:principal property="email"/>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-time"></i>
                        最近登录
                    </template>
                    {{ruleForm.creationTime}}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
    </div>
    <div class="from-right">
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>基本资料</span>
            </div>
            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="个人信息" name="first"></el-tab-pane>
                    <el-tab-pane label="修改密码" name="second"></el-tab-pane>
                </el-tabs>
            </template>
            <div v-show="showUser">
                <el-form label-width="80px" class="demo-ruleForm" :rules="rules" ref="ruleForm" :model="ruleForm">
                    <!--vue,如果key就不会渲染;所以,在添加和修改不同的状态下,都需要2个资产编号框,给不同prop属性-->
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="账号" prop="account">
                                <el-input v-model="ruleForm.account" size="medium" :readonly=true></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">&nbsp;&nbsp;</el-col>
                        <el-col :span="10">
                            <el-form-item label="名称" prop="userName">
                                <el-input v-model="ruleForm.userName" size="medium" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="手机号" prop="phone">
                                <el-input v-model="ruleForm.phone" size="medium" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">&nbsp;&nbsp;</el-col>
                        <el-col :span="10">
                            <el-form-item label="性别" prop="gender">
                                <el-radio-group v-model="ruleForm.gender" size="medium">
                                    <el-radio :label="1">男</el-radio>
                                    <el-radio :label="0">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="出生日期" prop="birthday">
                                <template>
                                    <div class="block">
                                        <el-date-picker
                                                v-model="ruleForm.birthday"
                                                type="date"
                                                size="medium"
                                                placeholder="出生日期"
                                                format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd">
                                        </el-date-picker>
                                    </div>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">&nbsp;&nbsp;</el-col>
                        <el-col :span="10">
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="ruleForm.email" size="medium" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <!--注册的提交按钮-->
                        <el-button>取消</el-button>
                        <el-button type="primary" @click="handleUpdateUser('ruleForm')">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div v-show="showPwd">
                <el-form :model="ruleFormPwd" status-icon :rules="rulesPwd" ref="ruleFormPwd" label-width="100px"
                         class="demo-ruleForm">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="原密码" prop="oldPwd">
                                <el-input type="password" v-model="ruleFormPwd.oldPwd" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="新密码" prop="newPwd">
                                <el-input type="password" v-model="ruleFormPwd.newPwd" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="确认密码" prop="confirmPwd">
                                <el-input type="password" v-model="ruleFormPwd.confirmPwd"
                                          autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button @click="resetForm('ruleFormPwd')">重置</el-button>
                        <el-button type="primary" @click="updateUserPwd('ruleFormPwd')">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/index.js"></script>
<script src="/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            let validateOldPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入原密码'));
                } else {
                    callback();
                }
            };
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleFormPwd.confirmPwd !== '') {
                        this.$refs.ruleFormPwd.validateField('confirmPwd');
                    }
                    callback();
                }
            };
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleFormPwd.newPwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            // 设置手机号的验证规则
            const checkPhone = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入联系方式'))
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback()
                    } else {
                        callback(new Error('请输入正确的电话'))
                    }
                }
            }
            // 验证邮箱
            const validateEmail = (rule, value, callback) => {
                if (/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/.test(value) || !value) {
                    callback()
                } else {
                    callback(new Error('请输入正确邮箱'))
                }
            }
            return {
                imageUrl:'',
                size: 'medium',
                activeName: '',
                imageBase64: '',
                showUser: true,
                showPwd: false,
                ruleForm: {
                    id: '',
                    account: '',
                    userName: '',
                    photoFile: null,
                    pwd: '',
                    gender: '',
                    phone: '',
                    birthday: '',
                    email: '',
                    creationTime: '',
                },
                ruleFormPwd: {
                    newPwd: '',
                    confirmPwd: '',
                    oldPwd: '',
                },
                rules: {
                    /*对应el-form-item的prop属性*/
                    userName: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
                    ],
                    phone: [
                        {type: 'string', required: true, message: '请输入手机号', trigger: 'blur'}, // 必填校验
                        {validator: checkPhone, trigger: 'blur'},
                    ],
                    birthday: [
                        {required: true, message: '请选择出生日期', trigger: 'change'}
                    ],
                    gender: [
                        {required: true, message: '请选择性别', trigger: 'change'}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'}, // 必填校验
                        {validator: validateEmail, trigger: 'blur'},
                    ],
                },
                rulesPwd: {
                    oldPwd: [
                        {validator: validateOldPwd, trigger: 'blur'}
                    ],
                    newPwd: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    confirmPwd: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                },
            }
        },
        methods: {
            handleAvatarSuccess(resp, file) {
                //this.imageUrl = URL.createObjectURL(file.raw);
                this.$message({
                    showClose: true,
                    message: '头像修改上传成功！',
                    type:"success"
                });
                setTimeout(() => {
                    top.location.reload()
                }, 1000);
            },
            beforeAvatarUpload(file) {
                const isJPG=(file.type==='image/png');
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            findAccountInfo() {
                // 设置当前页的员工列表
                axios.post("/api/user/findAccountInfo").then((res) => {
                    if (res.data == ''){
                        this.$message.error('用户信息过期！请重新登陆');
                        setTimeout("top.location.href = 'logout'",1000)
                    }
                    // 设置当前页的员工列表
                    this.ruleForm.id = res.data.id;
                    this.ruleForm.account = res.data.account;
                    this.ruleForm.userName = res.data.userName;
                    this.ruleForm.pwd = res.data.pwd;
                    this.ruleForm.photoFile = res.data.photoFile;
                    this.imageBase64 = "data:image/jpeg;base64," + res.data.photoFile;
                    this.ruleForm.phone = res.data.phone;
                    this.ruleForm.gender = res.data.gender;
                    this.ruleForm.email = res.data.email;
                    this.ruleForm.birthday = res.data.birthday;
                    this.ruleForm.creationTime = res.data.creationTime;
                })
            },
            handleClick(tab, event) {
                if (tab.index == 0) {
                    this.showUser = true;
                    this.showPwd = false;
                } else if (tab.index == 1) {
                    this.showUser = false;
                    this.showPwd = true;
                }
            },
            handleUpdateUser(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //定义要传递的参数
                        let params = new URLSearchParams();
                        //设置账号
                        params.append('account', this.ruleForm.account);
                        //设置更改后的名称
                        params.append('userName', this.ruleForm.userName);
                        //设置更改后的手机号
                        params.append('phone', this.ruleForm.phone);
                        //设置更改后的性别
                        params.append('gender', this.ruleForm.gender);
                        //设置更改后的出生日期
                        params.append('birthday', this.ruleForm.birthday);
                        //设置更改后的邮箱
                        params.append('email', this.ruleForm.email);
                        //添加部门信息
                        axios({
                            method: 'post',
                            url: '/api/user/updateUserInfo',
                            data: params
                        }).then((res) => {
                            //判断是否成功
                            if (res.data == 1) {
                                //添加成功后,刷新页面
                                this.findAccountInfo();
                                this.$message.success('个人信息修改成功,请重新登陆！');
                                setTimeout("top.location.href = 'logout'",1000)
                            } else if (res.data == 0) {
                                this.$message.error('个人信息修改失败');
                            }
                        }).catch((err) => {
                            //输出错误消息
                            console.info(err);
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            updateUserPwd(formName) {
                this.$confirm('此操作将修改密码, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            //定义要传递的参数
                            let params = new URLSearchParams();
                            //设置账号
                            params.append('account', this.ruleForm.account);
                            //设置修改后的密码
                            params.append('oldPwd', this.ruleFormPwd.oldPwd);
                            //设置修改后的密码
                            params.append('pwd', this.ruleFormPwd.newPwd);
                            //添加部门信息
                            axios({
                                method: 'post',
                                url: '/api/user/updateUserPwd',
                                data: params
                            }).then((res) => {
                                //判断是否成功
                                if (res.data == 1) {
                                    this.$message.success('密码修改成功，请重新登陆！');
                                    setTimeout("top.location.href = 'logout'",1000)
                                    //top.location.href = "logout"
                                } else if (res.data == 0) {
                                    this.$message.error('密码修改失败');
                                }else if (res.data == -1) {
                                    this.$message.error('原密码错误，密码修改失败');
                                }
                            }).catch((err) => {
                                //输出错误消息
                                console.info(err);
                            })
                        } else {
                            console.log('error submit!');
                            return false;
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        created: function () {
            this.findAccountInfo();
        },
    })
</script>
